import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { useModel } from '@umijs/max';
import { useRef } from 'react';
import { history } from '@umijs/max';
import { ModalForm, ProFormText, ProFormTextArea, ProTable } from '@ant-design/pro-components';
import { Button, Col, Form, message, Popconfirm, Row, Space } from 'antd';

import { delete_api, delete_batch_api, get_list_api, post_save_api } from './api';

export default function Page() {
  const ref = useRef<ActionType>();
  const [formAdd] = Form.useForm<CompanyMenberApi.UserModelDto>();
  const [formEdit] = Form.useForm<CompanyMenberApi.UserModelDto>();

  console.log(useModel('@@initialState').initialState?.currentUser?.user);
  const columns: ProColumns<CompanyMenberApi.UserList>[] = [
    // {
    //   dataIndex: 'index',
    //   valueType: 'indexBorder',
    //   width: 48,
    // },
    {
      title: '编号',
      width: 180,
      // copyable: true,
      search: false,
      dataIndex: 'id',
      render: (_,row) => <a onClick={()=>{
        const path=`/hy/CompanyMenber/View/${row.id}`;
        history.push(path)
      }}>{_}</a>,
    },
    {
      title: '公司名称',
      width: 160,
      dataIndex: 'companyName',
    },
    {
      title: '法定代表人',
      search: false,
      dataIndex: 'representative',
    },
    {
      title: '统一社会信用代码',
      search: false,
      dataIndex: 'creditCode',
    },
    {
      title: '电话',
      search: false,
      dataIndex: 'phone',
    },
    {
      title: '邮箱',
      search: false,
      dataIndex: 'email',
    },
    {
      title: '经营状态',
      search: false,
      dataIndex: 'operatingState',
    },
    {
      title: '成立日期',
      search: false,
      dataIndex: 'creationDate',
    },
    {
      title: '实缴资本',
      search: false,
      dataIndex: 'contributedCapital',
    },
    {
      title: '企业类型',
      search: false,
      dataIndex: 'enterpriseType',
    },
    {
      title: '所属行业',
      search: false,
      dataIndex: 'industry',
    },
    {
      title: '组织机构代码',
      search: false,
      dataIndex: 'organizationCode',
    },
    {
      title: '纳税人识别号',
      search: false,
      dataIndex: 'identificationNumber',
    },
    {
      title: '纳税人资质',
      search: false,
      dataIndex: 'aptitude',
    },
    {
      title: '操作',
      align: 'left',
      width: 140,
      key: 'option',
      valueType: 'option',
      render: (_, row) => {
        return [
          <ModalForm<CompanyMenberApi.UserModelDto>
            key="edit"
            title="编辑"
            width={600}
            modalProps={{
              destroyOnClose: true,
              maskClosable: false,
              onCancel: () => {},
            }}
            trigger={
              <a
                onClick={() => {
                  setTimeout(() => {
                    // 延迟填入数据，为了防止from未创建
                    console.log(row);
                    formEdit.setFieldsValue(row);
                  }, 100);
                }}
              >
                编辑
              </a>
            }
            form={formEdit}
            autoFocusFirstInput
            submitTimeout={2000}
            onFinish={async (values) => {
              console.log(values);
              values.id = row.id;

              const res = await post_save_api(values);
              console.log(res);
              if (res.success) {
                // 刷新

                ref.current?.reload();
                message.success('提交成功');
              }

              return res.success;
            }}
          >
            <Row gutter={16}>
              <Col span={24}>
                <ProFormText label="公司名称" placeholder="请输入公司名称" name="companyName" />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="法定代表人"
                  placeholder="请输入法定代表人"
                  name="representative"
                />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="注册资本(万元)"
                  placeholder="请输入注册资本(万元)"
                  name="registeredCapital"
                />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="统一社会信用代码"
                  placeholder="请输入统一社会信用代码"
                  name="creditCode"
                />
              </Col>
              <Col span={24}>
                <ProFormText label="电话" placeholder="请输入电话" name="phone" />
              </Col>
              <Col span={24}>
                <ProFormText label="邮箱" placeholder="请输入邮箱" name="email" />
              </Col>
              <Col span={24}>
                <ProFormText label="网址" placeholder="请输入网址" name="website" />
              </Col>
              <Col span={24}>
                <ProFormTextArea label="地址" placeholder="请输入地址" name="address" />
              </Col>
              <Col span={24}>
                <ProFormTextArea label="简介" placeholder="请输入简介" name="intro" />
              </Col>
              <Col span={24}>
                <ProFormText label="经营状态" placeholder="请输入经营状态" name="operatingState" />
              </Col>
              <Col span={24}>
                <ProFormText label="成立日期" placeholder="请输入成立日期" name="creationDate" />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="行政区划"
                  placeholder="请输入行政区划"
                  name="administrativeDivision"
                />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="实缴资本"
                  placeholder="请输入实缴资本"
                  name="contributedCapital"
                />
              </Col>
              <Col span={24}>
                <ProFormText label="企业类型" placeholder="请输入企业类型" name="enterpriseType" />
              </Col>
              <Col span={24}>
                <ProFormText label="所属行业" placeholder="请输入所属行业" name="industry" />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="工商注册号"
                  placeholder="请输入工商注册号"
                  name="registrationNumber"
                />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="组织机构代码"
                  placeholder="请输入组织机构代码"
                  name="organizationCode"
                />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="纳税人识别号"
                  placeholder="请输入纳税人识别号"
                  name="identificationNumber"
                />
              </Col>
              <Col span={24}>
                <ProFormText label="纳税人资质" placeholder="请输入纳税人资质" name="aptitude" />
              </Col>
              <Col span={24}>
                <ProFormText label="营业期限" placeholder="请输入营业期限" name="operatingTerm" />
              </Col>
              <Col span={24}>
                <ProFormText label="核准日期" placeholder="请输入核准日期" name="approvalDate" />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="登记机关"
                  placeholder="请输入登记机关"
                  name="registrationAuthority"
                />
              </Col>
              <Col span={24}>
                <ProFormText label="参保人数" placeholder="请输入参保人数" name="insuredNumber" />
              </Col>
              <Col span={24}>
                <ProFormText label="曾用名" placeholder="请输入曾用名" name="oldName" />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="注册地址"
                  placeholder="请输入注册地址"
                  name="registeredAddress"
                />
              </Col>
              <Col span={24}>
                <ProFormTextArea
                  label="经营范围"
                  placeholder="请输入经营范围"
                  name="businessScope"
                />
              </Col>
              <Col span={24}>
                <ProFormTextArea placeholder="请输入备注" name="remarks" label="备注" />
              </Col>
            </Row>
          </ModalForm>,

          <Popconfirm
            key="delete"
            title="删除"
            description="确认删除此条数据?"
            onConfirm={async () => {
              console.log(row.id);
              const res = await delete_api(row.id);
              if (res.success) {
                // 刷新
                ref.current?.reload();
                message.success('删除成功');
              }
            }}
            onCancel={() => {
              message.error('删除已取消');
            }}
            okText="是"
            cancelText="否"
          >
            <a style={{ color: '#F56C6C' }}>删除</a>
          </Popconfirm>,
        ];
      },
    },
  ];

  return (
    <PageContainer>
      <ProTable<CompanyMenberApi.UserList>
        actionRef={ref}
        request={async (params = {}) => {
          const columnFilters: any = {};
          Object.keys(params).forEach((key) => {
            if (key !== 'current' && key !== 'pageSize') {
              columnFilters[key] = {
                eq: '%',
                name: key,
                value: params[key],
              };
            }
          });
          const res = await get_list_api({
            columnFilters: columnFilters,
            pageNum: params?.current ?? 1,
            pageSize: params?.pageSize ?? 10,
          });

          return {
            page: params?.current,
            data: res.data.records,
            success: true,
            total: res.data.total,
          };
        }}
        rowKey="id"
        pagination={{
          pageSize: 10,
        }}
        columns={columns}
        rowSelection={{
          // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
          // 注释该行则默认不显示下拉选项
          // selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
          onChange: () => {},
        }}
        tableAlertOptionRender={({ selectedRows, onCleanSelected }) => {
          return (
            <Space size={16}>
              <Popconfirm
                key="delete"
                title="批量删除"
                description="确认删除这些数据?"
                onConfirm={async () => {
                  const list = selectedRows;
                  const listKeys = list.map((item) => item.id);
                  // console.log(listKeys);

                  const res = await delete_batch_api(listKeys);
                  if (res.success) {
                    onCleanSelected();
                    // 刷新
                    ref.current?.reload();
                    message.success('删除成功');
                  }
                }}
                onCancel={() => {
                  message.error('删除已取消');
                }}
                okText="是"
                cancelText="否"
              >
                <a style={{ color: '#F56C6C' }}>批量删除</a>
              </Popconfirm>
              {/* <a>导出数据</a> */}
            </Space>
          );
        }}
        dateFormatter="string"
        toolBarRender={() => [
          <ModalForm<CompanyMenberApi.UserModelDto>
            key="add"
            title="新增"
            width={600}
            modalProps={{
              destroyOnClose: true,
              maskClosable: false,
              onCancel: () => {},
            }}
            trigger={
              <Button type="primary" key="primary">
                新增
              </Button>
            }
            form={formAdd}
            autoFocusFirstInput
            submitTimeout={2000}
            onFinish={async (values) => {
              console.log(values);

              const res = await post_save_api(values);
              console.log(res);
              if (res.success) {
                // 刷新

                ref.current?.reload();
                message.success('提交成功');
              }

              return res.success;
            }}
          >
            <Row gutter={16}>
              <Col span={24}>
                <ProFormText label="公司名称" placeholder="请输入公司名称" name="companyName" />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="法定代表人"
                  placeholder="请输入法定代表人"
                  name="representative"
                />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="注册资本(万元)"
                  placeholder="请输入注册资本(万元)"
                  name="registeredCapital"
                />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="统一社会信用代码"
                  placeholder="请输入统一社会信用代码"
                  name="creditCode"
                />
              </Col>
              <Col span={24}>
                <ProFormText label="电话" placeholder="请输入电话" name="phone" />
              </Col>
              <Col span={24}>
                <ProFormText label="邮箱" placeholder="请输入邮箱" name="email" />
              </Col>
              <Col span={24}>
                <ProFormText label="网址" placeholder="请输入网址" name="website" />
              </Col>
              <Col span={24}>
                <ProFormTextArea label="地址" placeholder="请输入地址" name="address" />
              </Col>
              <Col span={24}>
                <ProFormTextArea label="简介" placeholder="请输入简介" name="intro" />
              </Col>
              <Col span={24}>
                <ProFormText label="经营状态" placeholder="请输入经营状态" name="operatingState" />
              </Col>
              <Col span={24}>
                <ProFormText label="成立日期" placeholder="请输入成立日期" name="creationDate" />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="行政区划"
                  placeholder="请输入行政区划"
                  name="administrativeDivision"
                />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="实缴资本"
                  placeholder="请输入实缴资本"
                  name="contributedCapital"
                />
              </Col>
              <Col span={24}>
                <ProFormText label="企业类型" placeholder="请输入企业类型" name="enterpriseType" />
              </Col>
              <Col span={24}>
                <ProFormText label="所属行业" placeholder="请输入所属行业" name="industry" />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="工商注册号"
                  placeholder="请输入工商注册号"
                  name="registrationNumber"
                />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="组织机构代码"
                  placeholder="请输入组织机构代码"
                  name="organizationCode"
                />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="纳税人识别号"
                  placeholder="请输入纳税人识别号"
                  name="identificationNumber"
                />
              </Col>
              <Col span={24}>
                <ProFormText label="纳税人资质" placeholder="请输入纳税人资质" name="aptitude" />
              </Col>
              <Col span={24}>
                <ProFormText label="营业期限" placeholder="请输入营业期限" name="operatingTerm" />
              </Col>
              <Col span={24}>
                <ProFormText label="核准日期" placeholder="请输入核准日期" name="approvalDate" />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="登记机关"
                  placeholder="请输入登记机关"
                  name="registrationAuthority"
                />
              </Col>
              <Col span={24}>
                <ProFormText label="参保人数" placeholder="请输入参保人数" name="insuredNumber" />
              </Col>
              <Col span={24}>
                <ProFormText label="曾用名" placeholder="请输入曾用名" name="oldName" />
              </Col>
              <Col span={24}>
                <ProFormText
                  label="注册地址"
                  placeholder="请输入注册地址"
                  name="registeredAddress"
                />
              </Col>
              <Col span={24}>
                <ProFormTextArea
                  label="经营范围"
                  placeholder="请输入经营范围"
                  name="businessScope"
                />
              </Col>
              <Col span={24}>
                <ProFormTextArea placeholder="请输入备注" name="remarks" label="备注" />
              </Col>
            </Row>
          </ModalForm>,
        ]}
      />
    </PageContainer>
  );
}
